   *{
 margin: 0;
 padding: 0;   
}
li{
 list-style: none;
}
a{
 text-decoration: none;
}
body{
background:#F5F5F5;
font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
}
#top{
	width:100%; height:36px;
	background: #363636;
	.top{
		width:1240px; height:36px;
		.right{
			width:300px; height:36px;
			float:right;
			ul{
				li{
					padding:0 10px;float: left;
					a{
						color:#A8A8A8;
						line-height: 36px;
						font-size: 12px;
						&:hover{
							color:#24A238;
						}
					}
				}
			}
			
		}
	}
}
#search{
	width:1240px;height:118px;margin: 0 auto;
	.logo{
		width:150px;height:118px;
		line-height:118px;float:left;
		a{
			display: block;
		}
	}
	.header_search{	
		width:740px;height:97px;
		float:right;
			.form{
				width:536px;height:46px;float:left;margin-top: 20px;
				.input{
					width:420px;height:38px;padding:0 10px;
					border:1px solid #23AC38;float:left;
					}
				.submit{
					border:none;float:left;
					width:72px;height:40px;
					background:#36AA3F url(../images/jlbj.png) no-repeat 24px -110px;
				}
			}
			.shopcar{
				width:156px;height:40px;position:relative;float:right;
					.gwc{
					margin-top:20px;position:relative;
					width:156px;height:42px;
					color:585858;
					font-size:12px;line-height:40px;
					background:#F9F9F9;
					border:1px solid #DDDDDD;text-align: center;
					z-index:2;
						i{
							width:20px;height:15px;margin:0px 6px -3px 7px;
							background:url(../images/jlbj.png) no-repeat 0 0;
							display:inline-block;
						}
					}
					.gwchtc{
						width:380px;height:98px;position:relative;
						background:white;
						color:#585858;
						left:-224px;top:-1px;
						text-align:center;
						font-size:12px;
						line-height:98px;
						border:1px solid #DDDDDD;
						box-shadow: 1px 1px 1px #DDDDDD;
						display:none;
						z-index:1;
					}
					&:hover .gwchtc{
						display:block;
					}
					&:hover .gwc{
						border-bottom: none;
						background:white;
						box-shadow:1px -1px 1px #DDDDDD;
						z-index:2;
						a{
							color:#35B349;
						}
						
					}
				}
		.hot{
			width:536px;height:21px;float:left;
			a{
				display:inline-block;padding-right: 13px;
				font-size:12px;color:#848484;
				&:hover{
					color:red;
				}
			}
		}
	}


}
#cate{
	width:100%;height:37px;border-bottom:1px solid black;
	#top_cate{
		width:1240px;height:37px;margin:0 auto;
	// background:#666666;
	.cate{
		width:210px;height:37px;float:left;
		background:#363636;position:relative;
		a:before{
			    background: url(../images/jlbj.png) no-repeat;
			    background-position: 3px -300px;
			    content: "";
			    height: 26px;
			    left: 25px;
			    position: absolute;
			    top: 7px;
			    width: 26px;
		}
		a{
			color:#fff;display:block;margin-left: 30px;padding-left:36px;
			line-height:37px;font-weight: bold;
			font-size:15px;
		}

	}
	ul{
			float:left;line-height:37px;
			
				li{
				height:37px;padding:0 15px;
				float:left;
					a{
						color:#323334;font-size: :15px;
					}
					&:hover a{
						color:#4BBB5C;
					}
				}
			
			
		}
	}
	
}
#banner{
	width:100%;height:448px;
	position:relative;
		.side_cate{
			width:210px;height:448px;
			position:absolute;top:0;left:50%;
			z-index:100;background:rgba(255,255,255,0.85);
			margin-left:-620px;
			ul{
				width:210px;
				li{
					height:56px;
					&:hover{
						background:rgba(255,255,255,0.88);
						}
					&:hover .cate_son{
						display:block;
					}
					a{
						line-height:56px;display:block;margin-left:60px;
						color:#1B1B1B;font-weight:bold;font-size:14px;
					}
					.cate_son{
						width:1030px;height:448px;position:absolute;
						background:rgba(255,255,255,0.95);
						left:210px;top:0px;
						display:none;
						.son1{
							width:700px;
							.son_title{
								width:100px;height:40px;padding: 0 15px;float:left;
								a{
									line-height:56px;margin-left:20px;
									color:#1B1B1B;font-weight:bold;font-size:14px;
								}
							}
							ul{
								width:560px; float:left;
								margin-top:15px;
								border-bottom:1px dashed #E0E0E0;
								padding-bottom: 10px;
								li{
									height:22px;
									float:left;padding-right:10px;
									a{
										line-height:22px;margin-left:0;color:#31373c;
										font-weight:normal;font-size:14px;
										&:hover{
											color:#4BBB5C;
										}
									}
								}
							}
						}
					}
				}
				.l1{
					.a1:before{
						background: url(../images/bjjl.png) no-repeat;
					    background-position: -9px -17px;
					    content: "";
					    height: 26px;
					    left: 25px;
					    position: absolute;
					    top: 15px;
					    width: 26px;
					}
				}
				.l2{
					.a2:before{
						background: url(../images/bjjl.png) no-repeat;
					    background-position: -9px -73px;
					    content: "";
					    height: 26px;
					    left: 25px;
					    position: absolute;
					    top: 71px;
					    width: 26px;
					}
				}
				.l3{
					.a3:before{
						background: url(../images/bjjl.png) no-repeat;
					    background-position: -9px -129px;
					    content: "";
					    height: 26px;
					    left: 25px;
					    position: absolute;
					    top: 127px;
					    width: 26px;
					}
				}
				.l4{
					.a4:before{
						background: url(../images/bjjl.png) no-repeat;
					    background-position: -9px -185px;
					    content: "";
					    height: 26px;
					    left: 25px;
					    position: absolute;
					    top: 183px;
					    width: 26px;
					}
				}
				.l5{
					.a5:before{
						background: url(../images/bjjl.png) no-repeat;
					    background-position: -9px -241px;
					    content: "";
					    height: 26px;
					    left: 25px;
					    position: absolute;
					    top: 239px;
					    width: 26px;
					}
				}
				.l6{
					.a6:before{
						background: url(../images/bjjl.png) no-repeat;
					    background-position: -9px -297px;
					    content: "";
					    height: 26px;
					    left: 25px;
					    position: absolute;
					    top: 295px;
					    width: 26px;
					}
				}
				.l7{
					.a7:before{
						background: url(../images/bjjl.png) no-repeat;
					    background-position: -9px -409px;
					    content: "";
					    height: 26px;
					    left: 25px;
					    position: absolute;
					    top: 351px;
					    width: 26px;
					}
				}
				.l8{
					.a8:before{
						background: url(../images/bjjl.png) no-repeat;
					    background-position: -9px -353px;
					    content: "";
					    height: 26px;
					    left: 25px;
					    position: absolute;
					    top: 407px;
					    width: 26px;
					}
				}
			}
		}
		// 右边图片部分开始
		.right{
			width:200px;height:448px;
			position:absolute;top:0;right:50%;
			z-index:50;
			margin-right:-620px;
			ul{
				li{
					width:200px;height:210px;margin-top:10px;background:rgba(255,255,255,0.7);
					&:hover{
						background:rgba(255,255,255,0.9);
					}
				}
			}
		}
}
// 轮播图部分开始
#mod-index-img{
    position: absolute;   
    width: 100%;
    height: 448px;
    a{
        display: block;
        width: 100%;
        height: 448px;
//      display: none;
        position: absolute;
        z-index: 10;
    }
    .mod-index-img-a1{
         background: url(../images/lunbo1.jpg) no-repeat 0 0;
        background-position: center;
        display: block;
    }
     .mod-index-img-a2{
         background: url(../images/lunbo2.jpg) no-repeat 0 0;
        background-position: center;
    }
     .mod-index-img-a3{
         background: url(../images/lunbo3.jpg) no-repeat 0 0;
        background-position: center;
    }
    .mod-index-img-a4{
         background: url(../images/lunbo4.jpg) no-repeat 0 0;
        background-position: center;
    }
     .mod-index-img-a5{
         background: url(../images/lunbo5.jpg) no-repeat 0 0;
        background-position: center;
    }
     .mod-index-img-a6{
         background: url(../images/lunbo3.jpg) no-repeat 0 0;
        background-position: center;
    }
 }
 .mod-index-bottom{
        width: 100%;
        height: 448px;
        position: absolute;
        
        .mod-index-bottom-left{
            height: 448px;
            width: 50%;
            position: relative;
            
            float: left;
            
            a{
                display: block;
                height: 72px;
                z-index: 12;
                width: 42px;
                font-size: 40px;
                text-align: center;
                line-height: 72px;
                position: absolute;
                top: 170px;
                color: white;
                right: 360px;
                border-radius: 5px;
                &:hover{
                background: #578299;
            }
            }
            
        }
           .mod-index-bottom-right{
            height: 448px;
            width: 50%;
            position: relative;
            float: left;
            
            a{
                display: block;
                text-align: center;
                color: white;
                height: 72px;
                width: 42px;
                font-size: 40px;
                line-height: 72px;
                z-index: 12;
                position: absolute;
                top: 170px;
                left: 360px;
                border-radius: 5px;
                 &:hover{
                background: #578299;
            }
            }
            
        }
    }
    .mod-index_yuandian{
            width: 175px;
            height: 28px;
            position: absolute;
            bottom: 25px;
            z-index: 30;
            left: 600px;
            li:nth-child(1){
                background: black;
            
            }
            li{
                
                height: 12px;
                width: 12px;
                border-radius: 50%;
                float: left;
                margin-left: 10px;
                background: #999999;
            }
        }
 // 轮播图部分结束
#ad_top{

	width:100%;height:320px;
	ul{
		width:1240px;height:320px;
		margin:0 auto;
		li{
			float:left;padding:15px 8px 15px 0;
			img:hover{
				opacity: 0.8;box-shadow:0 0 20px black;
			}
		}
	}
}
#hot_act{
	width:1240px;height:50px;margin:0 auto;
	text-align:center;line-height:50px;
	span{
		font-size:20px;color:red;
	}
	.img1{
		float:left;
	}
	.img2{
		float:right;
	}
}

#hot{
  width:1240px;
  height:50px;
  background: #F5F5F5;
  margin:0 auto;
  overflow: hidden;

  .left{
    width:388px;
    height:24px;
    border-bottom: 1px solid #E7E7E7;
    float:left;
  }
  .b1{
    width:112px;
    height:50px;
    float:left;
    span{
      width:112px;
      height:50px;
      background: #F5F5F5 url(../images/1.png);
      margin-top: 5px;
      display: block;

    }
  }
  .hot{
    width: 240px;
    height: 50px;
    float:left;
    text-align: center;
    line-height: 50px;
    span{
      font-size:20px;
      color:#ef5233;
    }
  }


  .b2{
    width:112px;
    height:50px;
    float:left;
    span{
      width:112px;
      height:50px;
      background: #F5F5F5 url(../images/1.png);
      margin-top: 5px;
      display: block;

    }
  }

  .right{
    width:388px;
    height:24px;
    border-bottom: 1px solid #E7E7E7;
    float:left;

  }

}

//图片区域 3个盒子

#hotBottom{
  width:1240px;
  height:420px;
  //background: red;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;//水平居中
  overflow: hidden;
  .left{
    width:265px;color:#fff;
    height:420px;background: -webkit-linear-gradient(-30deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 230px, rgba(255, 255, 255, 0.1) 260px, rgba(255, 255, 255, 0.1) 270px, rgba(255, 255, 255, 0) 300px, rgba(255, 255, 255, 0) 310px) no-repeat -270px 0, url(../images/2.png) no-repeat;
            transition: 1s;
            &:hover{
            /*鼠标滑过实现光斑滑动，但是在多背景情况下，需要多个background-position属性值，否则会影响其他背景*/
            background-position: 200px 0, 0 0;
            }




  }
  .mid{
    width:690px;
    height:425px;
    display: flex;
    align-content: space-between;//垂直两端对齐
    flex-wrap: wrap;//换行
    justify-content: space-between;//水平两端对齐
    img:hover{
    	box-shadow:0 0 25px black;opacity:0.7;
    }
  }
  .right{
    width:265px;
    height:420px;height:420px;background: -webkit-linear-gradient(-30deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 230px, rgba(255, 255, 255, 0.1) 260px, rgba(255, 255, 255, 0.1) 270px, rgba(255, 255, 255, 0) 300px, rgba(255, 255, 255, 0) 310px) no-repeat -270px 0, url(../images/1.jpg) no-repeat;
            transition: 1s;
            &:hover{
            /*鼠标滑过实现光斑滑动，但是在多背景情况下，需要多个background-position属性值，否则会影响其他背景*/
            background-position: 200px 0, 0 0;
            }


  }
}


  @s0:20px;
  @s1:14px;
  //颜色
  @t:#31373c;//楼层标题
  @hot:#8c8c8c;//热搜
  @6:#666;//热搜关键词
//1楼开始

#f1 {
  width: 1240px;
  height: 596px;

  margin: 0 auto;
  margin-top: 26px;
  margin-bottom:16px;
  //字体大小

  .first{
    width:1240px;
    height:44px;
    overflow: hidden;

    .left{
      width:1180px;
      height:44px;

      float:left;

      b{
        color:@t;
        font-size: @s0;
        line-height: 44px;
        float:left;
        margin-right:10px;
      }
      span{
        color:@hot;
        float:left;
        display: inline;
        line-height: 44px;
        //margin-bottom: 20px;
      }

      li{
        line-height: 44px;
        padding:0 3px;
        float:left;
        span{
          color:@6;
          font-size: 13px;
        }

        a{
          color:@6;
          font-size: @s1;
        }
      }
    }

    .right{
      width:60px;
      height:44px;
      float:left;
      .more{
        width:60px;
        height:24px;
        margin-top:12px ;
        display: inline-block;
        background: url(../images/img1.png) no-repeat -152px -19px ;
        &:hover{
          background:  url(../images/img1.png) no-repeat -152px -43px ;


        }
        &:hover {
          color:#EC3B19;
        }
      }

    }
  }


  //图片区域

  .img{
    width:1240px;
    height:522px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;


    .box{
        position: relative;
        display: block;


      .show{
        width: 246px;
        height:99px;
        position: absolute;
        left:0px;
        top:20px;
       p{
         text-align: center;
         margin-top: 3px;
         margin-bottom: 3px;
       }
        .title{
          color: #252525;
          font-size: 16px;
        }
        .des{
          color: #8e8e8e;
          font-size: 14px;

        }
        .price{
          color: #ed3714;
          font-size: 14px;
        }
      }
    }
  }
}
#new{
  width: 1240px;
  height:100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  b{
    color: #31373c;
    font-size: 16px;
    width:1240px;
    display: block;
    height:30px;

  }
  a{
    width:225px;
    height: 310px;
    display: block;
    background: #FFFFFF;
    padding-left:10px;
    padding-right: 5px ;
    padding-top:5px;
    padding-bottom:5px;
    border-bottom:10px solid #F5F5F5;


    img{
      width:220px;
      height:220px;
    }
    .show{
      width:220px;
      height:90px;

      .top{
        width:220px;
        height:50px;
        line-height:25px;overflow:hidden;

        p{
          color: #343434;
          font-size: 14px;

        }
      }
      .bottom{
        width: 220px;
        height:36px;line-height:36px;


        .left{
          width:110px;
          height:36px;
          float:left;

          span{
            color: #ed3714;
            float: left;
            font-size: 14px;

          }
        }
        .right{
          width: 110px;
          height:36px;
          float:left;
          span{
            color: #b3b3b3;
            float:right;
          }
        }
      }
    }
  }
}
#ser{
	width:100%;height:94px;border-bottom:1px solid #E8E8E8;border-top:1px solid #E8E8E8;
	background:#fff;float:left;
	.ser{
		width:1240px;height:60px;margin:0 auto;margin-top:17px;
		line-height:60px;
		.li{
			width:33%;height:60px;border-right: solid 1px #E8E8E8;
		    color: #302E33; float: left;line-height: 60px;font-size:18px;
		    text-align:center;
			i{
				border: 2px solid #23AC38;
			    border-radius: 20px;
			    color: #23AC38;
			    display: inline-block;
			    font-style: normal;
			    font-weight: 400;
			    height: 36px;
			    line-height: 36px;
			    margin-right: 10px;
			    vertical-align: middle;
			    width: 36px;
			}
		}
		.lin{
			border: none;
		}
	}
}


#footer{
  width:100%;
  height: 50px;float:left;
  border-top:1px solid #E8E8E8;
  .ft{
    width:1240px;
    height:50px;
    margin:0 auto;

    p{
      width:550px;
      height:40px;
      display: block;
      color: #848484;
      font-size: 12px;
      text-align: center;
      margin:0 auto;
      margin-top: 10px;
    }
  }
}
// #f2 {
//   width: 1240px;
//   height: 596px;

//   margin: 0 auto;
//   margin-top: 26px;
//   margin-bottom:16px;
//   //字体大小

//   .first{
//     width:1240px;
//     height:44px;
//     overflow: hidden;

//     .left{
//       width:1180px;
//       height:44px;

//       float:left;

//       b{
//         color:@t;
//         font-size: @s0;
//         line-height: 44px;
//         float:left;
//         margin-right:10px;
//       }
//       span{
//         color:@hot;
//         float:left;
//         display: inline;
//         line-height: 44px;
//         //margin-bottom: 20px;
//       }

//       li{
//         line-height: 44px;
//         padding:0 3px;
//         float:left;
//         span{
//           color:@6;
//           font-size: 13px;
//         }

//         a{
//           color:@6;
//           font-size: @s1;
//         }
//       }
//     }

//     .right{
//       width:60px;
//       height:44px;
//       float:left;
//       .more{
//         width:60px;
//         height:24px;
//         margin-top:12px ;
//         display: inline-block;
//         background: url(./images/img1.png) no-repeat -152px -19px ;
//         &:hover{
//           background:  url(./images/img1.png) no-repeat -152px -43px ;


//         }
//         &:hover {
//           color:#EC3B19;
//         }
//       }

//     }
//   }
//   // 图片部分开始
//   .f_left{
//   	width:240px;height:542px;float:left;

//   	img{
//   		align-content: space-between;
//   	}
//   }
//   .f_center{
//   	width:741px;height:542px;float:left;
//   	// display: flex;flex-wrap: wrap; justify-content: space-between;
//   	ul{
//   		float:right;	
//   		li{
//   			position:relative;float:left;
//   			border-bottom:1px;  	
// 	  		.show{
// 	        width: 246px;
// 	        height:99px;
// 	        position:absolute;
// 	        left:0;top:20px;
// 	       p{
// 	         text-align: center;
// 	         margin-top: 3px;
// 	         margin-bottom: 3px;
// 	       }
// 	        .title{
// 	          color: #252525;
// 	          font-size: 16px;
// 	        }
// 	        .des{
// 	          color: #8e8e8e;
// 	          font-size: 14px;

// 	        }
// 	        .price{
// 	          color: #ed3714;
// 	          font-size: 14px;
// 	        }
// 	      }
//   	}
//   	}
  

//   }
// }
// 
// 
// 
// 左侧浮动部分开始
#leftbar{
	width:40px;height:156px;position:fixed;
	bottom:20px;right:2px;z-index:999;
	ul{
		li{
			width:40px;height:40px;
			border: 1px solid red;
			.WeChat{
				    background: #FFF;
				    border: 1px solid #CCC;
				    left: -210px;
				    padding: 15px;
				    position: absolute;
				    text-align: center;
				    top: -53px;
				    width: 140px;
			}
		}
	}
}